<template>
  <div class="xin-address">
    <div class="box">
      <div class="gray"></div>
      <div class="cont">
        <div class="name">
          <span>收货人:</span>
          <input placeholder="请填写收货人的姓名" v-model="name">
        </div>
        <!-- <div class="sex">
          <label @click="selectsex(2)">
            <Radio class="radio" ref="radio1" v-bind:chacked="sex==2?true:false" ></Radio>
            女士
          </label> 
          <label @click="selectsex(1)">
            <Radio class="radio" ref="radio2" v-bind:chacked="sex==1?true:false" ></Radio>
            先生
          </label> 
        </div> -->
        <div class="phone">
          <span>手机号:</span>
          <input placeholder="请填写收货人手机号" v-model="phone">
        </div>
        <!-- <div class="add">
          <span>收货地址</span>
          <input placeholder="点击选择收货地址" v-model="shouhuoaddress">
        </div> -->

        <div style="width:100%;height:20px;background-color:#F9F9F9;"></div>

         <div class="phone" style="position: relative;">
          <span>收货地址:</span>
          <input style="margin-left:10px;" placeholder="点击选择收货地址" v-model="xuanaddress">

          <van-field
            class="yincang"
            readonly
            clickable
            label=""
            :value="value[0]+value[1]+(value[2]==undefined?'':value[2])"
            placeholder=""
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @cancel="showPicker = false"
              @confirm="onConfirm"
              @change="onChange"
            />
          </van-popup>
        </div>


        <div class="house-num">
          <span>门牌号:</span>
          <input placeholder="详细地址，例如：3号楼2单元105" v-model="xiangxiaddress" > 
        </div>
        <!-- <div class="name">
          <span>电子邮箱:</span>
          <input style="margin-left:10px;" placeholder="请填写邮箱" v-model="email">
        </div> -->

        <!-- <div class="moren">
          <span>默认地址</span>
          <div class="sw">
            <van-switch v-model="checked" size="24px" active-color="#07c160" inactive-color="#ccc"/>
          </div>
          
        </div> -->
      </div>
      <div class="but" @click="baocun">保存</div>
    </div>
  </div>
</template>


<script>
  import Radio from "../radio";

  export default {

  
    data() {
      return {
        // 1男 2女
        // sex:2,
        checked: true,
        name:"",
        phone:"",
        xiangxiaddress:"",

        provinceid:'',
        cityid:'',
        quid:'',

        citys:'',
        list:'',
        value: ["","",''],
        showPicker: false,
        columns: '',
        // email:'',
        address_id:"",
        beforepath:"",
        xuanaddress:""
      }
    },
    methods: {
      selectsex(index){
        this.sex=index
        for (const key in this.$refs) {
          this.$refs[key].getchange()
        }
      },
      onChange(picker, values) {
        console.log(picker,values)
          // console.log(picker.getColumnIndex())

        // picker.setColumnValues(1, this.citys[values[0]]);
        for (const key in this.citys) {
            if(values[0]==this.citys[key].region_name){
             
              var city2=[]
              for (const x in this.citys[key].data) {
                city2.push(this.citys[key].data[x].region_name)

                if(values[1]==this.citys[key].data[x].region_name){
                  var city3=[]
                  for(const y in this.citys[key].data[x].data){
                    city3.push(this.citys[key].data[x].data[y].region_name)
                  }
                   console.log(city3)
                  picker.setColumnValues(2, city3);
                }

              }
              console.log(city2)
              picker.setColumnValues(1, city2);
              
            }
        }

      },

      onConfirm(values) {
        this.value = values;
        this.showPicker = false;
         // picker.setColumnValues(1, this.citys[values[0]]);
        for (const key in this.citys) {

            if(values[0]==this.citys[key].region_name){

              this.provinceid=this.citys[key].region_id

              for (const x in this.citys[key].data) {

                if(values[1]==this.citys[key].data[x].region_name){

                  this.cityid=this.citys[key].data[x].region_id

                  for (const y in this.citys[key].data[x].data) {

                    if (values[2]==this.citys[key].data[x].data[y].region_name) {

                      this.quid=this.citys[key].data[x].data[y].region_id

                    }
                  }
                }
              }
            }
        }
         this.xuanaddress=this.value[0]+this.value[1]+(this.value[2]==undefined?'':this.value[2])
        console.log(this.provinceid,this.cityid,this.quid)

      },

      getshengshiqu(){
        // api/gzh_index.php?action=region_list
        this.$get("api/gzh_index.php?action=region_list", {
          
        }).then(res => { 
          console.log(res.data,'res')
          this.citys=res.data
          var city1=[]
          var city2=[]
          var city3=[]
          for (const key in res.data) {
            city1.push(res.data[key].region_name)
            // city1.push('aaa')
          }
          for (const key in res.data[0].data) {
            city2.push(res.data[0].data[key].region_name)
          }
          for (const key in res.data[0].data[0].data) {
            city3.push(res.data[0].data[0].data[key].region_name)
          }


          this.columns=[
            {
              values: city1,
              className: 'column1'
            },
            {
              values: city2,
              className: 'column2',
              defaultIndex: 0
            },
             {
              values: city3,
              className: 'column3',
              defaultIndex: 0
            }
          ]
        }).catch(err => {
          
        });
      },

      phoneFun(phones){
          // var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
          if (!(/^1[3456789]\d{9}$/.test(phones))) {
              console.log('手机号格式不正确')
            return false;
          } else {
              console.log('手机号格式正确')
            return true;
          }
      },

      baocun(){
        console.log(localStorage.getItem('uid'))
        var uid=localStorage.getItem('uid')
        if(this.name==''){
          this.$toast('姓名不能为空');
          return
        }
         if(this.phone==''){
          this.$toast('手机号不能为空');
          return
        }
        // var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        if(!(/^1[3456789]\d{9}$/.test(this.phone))){
          this.$toast('请输入正确手机号');
          return
        }
        if(this.provinceid==''){
          this.$toast('请选择收货地址');
          return
        }
        //  if(this.xiangxiaddress==''){
        //   this.$toast('详细地址不能为空');
        //   return
        // }
        
        // if(this.email==''){
        //   this.$toast('邮箱不能为空');
        //   return
        // }
        // var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
        // if(!reg.test(this.email)){
        //   this.$toast('请输入正确邮箱');
        //   return
        // }

        this.$get(
            // method: "get",
            "api/gzh_order.php?action=address_edit",
            {
              uid:uid,
              address_id:this.address_id,
              consignee:this.name,
              country:this.provinceid,
              province:this.cityid,
              city:this.quid,

              address:this.xiangxiaddress,
              mobile:this.phone,
              // email:this.email,
              // is_default:this.checked?'1':'0'

            },
           
        ).then(response => {
            console.log(response)
            if(response.error==0){
              this.$toast('修改成功');
            
              // this.$router.push({path:'/'+this.beforepath})
              if(this.beforepath=='address'){
                this.$router.replace({path:'/'+this.beforepath})
              }else{
                 this.$router.replace({path:'/'+this.beforepath})
              }

            }else{
               this.$toast(response.data.msg);
            }
           
        })

      },
      getdetails(){
        var uid=localStorage.getItem('uid')
         this.$get(
            // method: "get",
            "api/gzh_order.php?action=address_show",
            {
              uid:uid,
              address_id:this.address_id
            },
           
        ).then(response => {
            console.log(response.data)
            // address: "3号"
            // city: "3467"
            // city_name: "土城头村"
            // consignee: "王仰勃"
            // country: "3445"
            // country_name: "兴隆县"
            // email: "1197213754@qq.com"
            // is_default: "0"
            // mobile: "17794039424"
            // province: "3453"
            // province_name: "平安堡镇"
            this.value=[]
            this.value.push(response.data.country_name)
            this.value.push(response.data.province_name)
            this.value.push(response.data.city_name)
            this.name=response.data.consignee
            // this.email=response.data.email
            this.phone=response.data.mobile

            this.provinceid=response.data.country,

            this.cityid=response.data.province,

            this.quid=response.data.city,

            this.xiangxiaddress=response.data.address
            // this.checked=response.data.is_default=='0'?false:true

             this.xuanaddress=this.value[0]+this.value[1]+(this.value[2]==undefined?'':this.value[2])
        })
      }
    },
    components: {
      Radio,
    },
    created () {
      // console.log(this.$route.params)
      this.address_id=this.$route.query.id
      this.beforepath=this.$route.query.path
      // this.name=item.consignee
      // this.phone=item.mobile
      // this.xiangxiaddress=item.address
      // this.email=item.email

      // console.log(this.columns)
      this.getdetails()
      this.getshengshiqu()
    },
    
  }
</script>

<style scoped>
.yincang{
  width:100%;
  height:100%;
  position: absolute;
  left:0;
  top:0;
  opacity: 0;
  
}

.xin-address{
  width: 100%;
}
.box{
  width: 100%;
  min-height: 100vh;
  background: #F3F3F3
}
.gray{
  width: 100%;
  height: 20px;
  background: #F3F3F3;
}
.cont{
  width: 100%;
  /* height: 600px; */
  background: #fff;
}
.name,.phone,.add,.house-num,.moren{
  width: 690px;
  height: 98px;
  margin: auto;
  line-height: 98px;
}
.sex{
  width: 530px;
  height: 98px;
  margin: auto;
  margin-left: 190px;
  border-top: 1PX solid #F9F9F9;
  border-bottom: 1PX  solid #F9F9F9;
  display: flex;
  align-items: center;
}
.sex label{
  font-size: 28px;
  color: #333;
  margin-right: 96px;
  display: flex;
  align-items: center;
}
.sex label .radio{
  display: inline-block;
  margin-right: 22px;
}
.phone,.add,.house-num,.moren{
  border-bottom: 1PX solid #F9F9F9;
}
.name span,.phone span,.add span,.house-num span,.moren span,.shiqu span{
  font-size: 30px;
  color: #333333;
}
.name input,.phone input,.add input,.house-num input{
  border: none;
  font-size: 28px;
  margin-left: 50px;
  width: 460px;
  height: 40px;
  display: inline-block;
  user-select: text;
  -webkit-appearance: none;
  vertical-align: baseline;
  line-height: normal;
  transform: translateZ(0);
}
.name input:focus,.phone input:focus,.add input:focus,.house-num input:focus{
  outline:none
}
.moren{
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;
}
.moren .sw{
  padding-left: 30px;
  padding-top: 15px;
}


.but{
  width:632px;
  height:100px;
  border-radius:50px;
  font-size:34px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(255,255,255,1);
  line-height: 100px;
  text-align: center;
  background: #ED2824;
  margin: auto;
  margin-top: 200px;
}
label{
  display: flex;
  font-size: 26px;
}


.diqu{
  width: 100%;
  height: 81px;
  border-top: 1PX solid #EFEFEF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  box-sizing: border-box;
}
.xuan{
  font-size:32px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:36px;
}
.shiqu{
  display: flex;
  align-items: center;
  /* justify-content:flex-end; */
  /* width: 90% */
}
.shiqu div{
  font-size:32px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(6,162,85,1);
  line-height:36px;
  margin-right: 27px;
}
.shiqu img{
  width: 12px;
  height: 22px;
}

</style>
<style scoped>
  .van-cell__title{
    display:none;
  }
  .van-field__control{
    text-align: left;
  }
  .van-cell{
    width:80%;
  }
  .van-field__label{
    display:none;
  }
  .van-field__control{
    font-size: 28px;
  }



 .van-toast{
  width:  80vw;
  height: 100px ;
  font-size: 28px;
  }
.van-toast--html, .van-toast--text{
  width: 80vw ;
  height: 100px ;
  font-size: 28px;
  }

</style>